<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Pot light</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
   
    <div id="uiContainer">
        <div id="ui">
            <div id="fRotation"></div>
            <div id="lightRotationX"></div>
            <div id="lightRotationY"></div>
            <div id="innerLimit"></div>
            <div id="outerLimit"></div>
            <div id="fCameraX"></div>
            <div id="fCameraY"></div>
            <div id="fCameraZ"></div>
            <div id="lightPositionX"></div>
            <div id="lightPositionY"></div>
            <div id="lightPositionZ"></div>
        </div>
    </div>
    <canvas id="canvas"></canvas>
    <!-- vertex shader -->
    <script id="vertex-shader-3d" type="x-shader/x-vertex">
attribute vec4 a_position;
attribute vec3 a_normal;
attribute vec2 aTextureCoord;

uniform vec3 u_lightWorldPosition;
uniform vec3 u_viewWorldPosition;

uniform mat4 u_world;
uniform mat4 u_worldViewProjection;
uniform mat4 u_worldInverseTranspose;

varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;
varying vec2 vTextureCoord;
varying vec3 vLighting;
void main() {

  vTextureCoord = aTextureCoord;
 
  gl_Position = u_worldViewProjection * a_position;

  // orient the normals and pass to the fragment shader
  v_normal = mat3(u_worldInverseTranspose) * a_normal;

  // compute the world position of the surfoace
  vec3 surfaceWorldPosition = (u_world * a_position).xyz;

  // compute the vector of the surface to the light
  // and pass it to the fragment shader
  v_surfaceToLight = u_lightWorldPosition - surfaceWorldPosition;

  // compute the vector of the surface to the view/camera
  // and pass it to the fragment shader
  v_surfaceToView = u_viewWorldPosition - surfaceWorldPosition;

  vec3 ambientLight = vec3(0.2,0.2,0.2);
  vLighting = ambientLight;
}
</script>
    <!-- fragment shader -->
    <script id="fragment-shader-3d" type="x-shader/x-fragment">
        precision mediump float;

// Passed in from the vertex shader.
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
varying vec3 v_surfaceToView;

uniform float u_shininess;
uniform vec3 u_lightDirection;
uniform float u_innerLimit;          // in dot space
uniform float u_outerLimit;          // in dot space
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
varying vec3 vLighting;

void main() {

  
  vec4 texelColor = texture2D(uSampler, vTextureCoord);
  vec3 normal = normalize(v_normal);

  vec3 surfaceToLightDirection = normalize(v_surfaceToLight);
  vec3 surfaceToViewDirection = normalize(v_surfaceToView);
  vec3 halfVector = normalize(surfaceToLightDirection + surfaceToViewDirection);

  float dotFromDirection = dot(surfaceToLightDirection,
                               -u_lightDirection);
  float inLight = smoothstep(u_outerLimit, u_innerLimit, dotFromDirection);
  float light = inLight * dot(normal, surfaceToLightDirection);
  float specular = inLight * pow(dot(normal, halfVector), u_shininess);

  //gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
  gl_FragColor = vec4(1.0,1.0,1.0,1.0);
  gl_FragColor.rgb *= light;
  gl_FragColor.rgb += specular;
  gl_FragColor +=  vec4(texelColor.rgb * vLighting, texelColor.a);

  
}
</script>
    <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
    <script src="https://webglfundamentals.org/webgl/resources/webgl-lessons-ui.js"></script>
    <script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
    <script src="utils.js"></script>
    <script src="3.js"></script>

</body>

</html>